<template>
    <div>

        <el-dialog :visible.sync="visible" :before-close="handleClose" @close="ConfirmClose"
                   :fullscreen="fullscreen" width="90%" top="4vh">


            <div slot="title">
                <div
                    style=" width:90%;display: flex;align-items: center;justify-content: space-between;border-bottom: #99a9bf 1px solid;padding-bottom: 20px">
                    <span style="font-weight: bold">Approve Chance</span>

                    <div style="margin-bottom: -30px">
                        <el-form ref="elForm" :inline="true" :model="newApproval" :rules="inlineRules">

                            <el-form-item label="approvalName" prop="approvalName">
                                <el-input v-model="newApproval.approvalName"
                                          placeholder="Please enter approval name"></el-input>
                            </el-form-item>
                            <!--                                处理意见 -->
                            <el-form-item label="handleAdvice" prop="approvalHandleAdvice">
                                <el-select v-model="newApproval.approvalHandleAdvice">
                                    <el-option v-for="(item, index) in handleAdviceOptions" :key="index"
                                               :label="item.label"
                                               :value="item.value" :disabled="item.disabled"></el-option>
                                </el-select>
                            </el-form-item>

                            <!--                                审批意见 -->
                            <el-form-item label="approvalAdvice" prop="approvalAdvice">
                                <el-input v-model="newApproval.approvalAdvice"
                                          placeholder="Please enter approval advice"></el-input>
                            </el-form-item>

                            <el-button type="primary" icon="el-icon-upload" @click="handleConfirm">Upload
                            </el-button>

                            <el-button icon="el-icon-refresh-left" @click="ConfirmClose">
                                Cancel
                            </el-button>
                        </el-form>
                    </div>
                </div>

            </div>
            <div class="fullscreen" @click="onFullScreenClick">
                <i class="el-icon-full-screen"/>
            </div>

            <el-row :gutter="20">
                <el-col :span="12">

                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold">Chance Info</span>
                        </div>

                        <el-form :model="addChanceForm" size="medium"
                                 label-width="100px"
                                 label-position="left">
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="chanceName" prop="chanceName">
                                    <el-input v-model="addChanceForm.chanceName" :disabled='true' clearable
                                              :style="{width: '100%'}">
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="chanceId" prop="chanceId">
                                    <el-input v-model="addChanceForm.chanceId" :disabled='true' clearable
                                              :style="{width: '100%'}"></el-input>
                                </el-form-item>
                                <el-form-item label="customerName" prop="customerName">
                                    <el-input v-model="addChanceForm.customerName" :disabled='true' clearable
                                              :style="{width: '100%'}"></el-input>
                                </el-form-item>
                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="chanceResource" prop="chanceResource">
                                    <el-select v-model="addChanceForm.chanceResource" :disabled='true' filterable
                                               clearable
                                               :style="{width: '100%'}">
                                        <el-option v-for="(item, index) in options.chanceResourceOptions" :key="index"
                                                   :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="chancePhase" prop="chancePhase">
                                    <el-select v-model="addChanceForm.chancePhase" :disabled='true' filterable clearable
                                               :style="{width: '100%'}">
                                        <el-option v-for="(item, index) in options.chancePhaseOptions" :key="index"
                                                   :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>

                            </el-row>
                            <el-row type="flex" justify="start" align="top">
                                <el-form-item label="chanceBelong" prop="chanceBelong">
                                    <el-select v-model="addChanceForm.chanceBelong" :disabled='true' filterable
                                               clearable
                                               :style="{width: '100%'}">
                                        <el-option v-for="(item, index) in options.chanceBelongOptions" :key="index"
                                                   :label="item.label"
                                                   :value="item.value" :disabled="item.disabled"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label-width="120px" label="chanceOldCustomer" prop="chanceOldCustomer">
                                    <el-switch v-model="addChanceForm.chanceOldCustomer" :disabled='true'></el-switch>
                                </el-form-item>
                                <el-form-item label="chanceTime" prop="chanceTime">
                                    <el-date-picker v-model="addChanceForm.chanceTime" format="yyyy-MM-dd"
                                                    value-format="yyyy-MM-dd"
                                                    :style="{width: '100%'}" :disabled='true'
                                                    clearable></el-date-picker>
                                </el-form-item>
                            </el-row>
                            <el-form-item label-width="120px" label="chanceBackground" prop="chanceBackground">
                                <el-input v-model="addChanceForm.chanceBackground" type="textarea" :disabled='true'
                                          :autosize="{minRows: 2, maxRows: 5}" :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-form>
                    </el-card>

                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold">Subchance List</span>
                        </div>

                        <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                                  :data="subchanceTable" show-summary>
                            <el-table-column
                                type="index"
                                width="50"
                                label="Index">
                            </el-table-column>
                            <el-table-column property="subchanceName" label="subchanceName"></el-table-column>
                            <el-table-column property="subchanceType" label="subchanceType"></el-table-column>
                            <el-table-column property="subchanceProduct" label="subchanceProduct"></el-table-column>
                            <el-table-column property="subchanceDept" label="subchanceDept"></el-table-column>
                            <el-table-column property="subchanceMoney" label="subchanceMoney"></el-table-column>

                        </el-table>
                    </el-card>

                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold">Approval Process</span>
                        </div>
                        <div>
                            <el-steps :space="200" :active="approvalStep">
                                <el-step title="Submitter"></el-step>
                                <el-step title="Market Manager"></el-step>
                                <el-step title="Sales Manager"></el-step>
                            </el-steps>
                        </div>

                    </el-card>

                </el-col>


                <el-col :span="12">
                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold"> Approval Report </span>

                        </div>

                        <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                                  :data="approvalTable">

                            <el-table-column property="approvalId" label="id"></el-table-column>
                            <el-table-column property="approvalName" label="name"></el-table-column>
                            <el-table-column property="approvalMember" label="member"></el-table-column>
                            <el-table-column property="approvalStatus" label="status"></el-table-column>
                            <el-table-column property="approvalHandleAdvice" label="handleAdvice"></el-table-column>
                            <el-table-column property="approvalAdvice" label="advice"></el-table-column>
                            <el-table-column property="approvalTime" label="apply time"></el-table-column>

                        </el-table>
                    </el-card>
                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold"> Competition </span>
                        </div>

                        <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                                  :data="competitionTable">
                            <el-table-column
                                type="index"

                                label="row id">
                            </el-table-column>
                            <el-table-column property="competitionRival" label="rival"></el-table-column>
                            <el-table-column property="competitionPotential"
                                             label="Competitive position"></el-table-column>


                        </el-table>
                    </el-card>

                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold"> Purchase decision maker information </span>
                        </div>

                        <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                                  :data="purchaseTable">

                            <el-table-column property="purchaseName" label="name"></el-table-column>
                            <el-table-column property="purchaseDept" label="dept"></el-table-column>
                            <el-table-column property="purchasePosition" label="position"></el-table-column>
                            <el-table-column property="purchasePhone" label="purchasePhone"></el-table-column>
                            <el-table-column property="purchaseDecision" label="purchaseDecision"></el-table-column>
                            <el-table-column property="purchaseEffect" label="purchaseEffect"></el-table-column>
                            <el-table-column property="purchaseAccept" label="purchaseAccept"></el-table-column>


                        </el-table>


                    </el-card>

                    <el-card shadow="never" class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-weight:bold"> Chance Track </span>
                        </div>

                        <el-table :header-cell-style="{fontSize:'12px',background:'#eef1f6',color:'#495085'}"
                                  :data="trackTable">
                            <el-table-column
                                type="index"

                                label="index">
                            </el-table-column>
                            <el-table-column property="trackBusinessType" label="businessType"></el-table-column>
                            <el-table-column property="trackDate" label="date"></el-table-column>

                            <el-table-column property="trackMemberSelf" label="memberSelf"></el-table-column>
                            <el-table-column property="trackMemberThird" label="memberThird"></el-table-column>

                            <el-table-column property="trackCommMode" label="commMode"></el-table-column>
                            <el-table-column property="trackAddress" label="address"></el-table-column>

                            <el-table-column property="trackCommSituation" label="commSituation"></el-table-column>
                            <el-table-column property="trackCommEffect" label="commEffect"></el-table-column>

                        </el-table>
                    </el-card>



                </el-col>
            </el-row>
        </el-dialog>


    </div>
</template>

<script>
import {options} from "@/data/const";

export default {
    name: "ApprovalDialog",
    props: ['visible', 'close', 'callback', 'options'],

    data() {
        return {
            //从父组件获得这一行数据的index，方便之后将数据修改传回去
            index: null,
            fullscreen: false,
            approvalStep: 2,
            handleAdviceOptions: [],


            // approvalRow: {
            //     approvalName: 'xxx',
            //     chanceId: 111,
            //     chanceName: 'xxx',
            //     approvalUploader: 'xxx',
            //     approvalUptime: 'xxx',
            // },


            addChanceForm: {
                chanceId: null,
                chanceName: "xxx",
                chanceResource: "xxx",
                chancePhase: "xxx",
                chanceTime: "2021-07-18",
                customerMgrDept: undefined,
                customerMgrName: undefined,

                customerName: "neusoft",
                chanceBelong: "xxx",
                chanceOldCustomer: true,
                chanceBackground: "xxx",
            },

            subchanceTable: [{
                subchanceName: '子机会名称',
                subchanceType: '机会类型',
                subchanceProduct: '产品',
                subchanceDept: '事业部',
                subchanceMoney: '500',
            }, {
                subchanceName: '子机会名称',
                subchanceType: '机会类型',
                subchanceProduct: '产品',
                subchanceDept: '事业部',
                subchanceMoney: '200',
            }],

            competitionTable: [{
                competitionRival: '北京快手科技有限公司',
                competitionPotential: '旗鼓相当',
            }, {
                competitionRival: '北京快手科技有限公司',
                competitionPotential: '旗鼓相当',
            }],

            purchaseTable: [{
                purchaseName: 'xxx',
                purchaseDept: 'xxx',
                purchasePosition: 'xxx',
                purchasePhone: 'xxx',
                purchaseDecision: 'xxx',
                purchaseEffect: 'xxx',
                purchaseAccept: 'xxx',
            }, {
                purchaseName: 'xxx',
                purchaseDept: 'xxx',
                purchasePosition: 'xxx',
                purchasePhone: 'xxx',
                purchaseDecision: 'xxx',
                purchaseEffect: 'xxx',
                purchaseAccept: 'xxx',
            }],

            trackTable: [{
                trackId: 1,
                trackBusinessType: 'xxx',
                trackDate: 'xxx',
                trackMemberSelf: 'xxx',
                trackMemberThird: 'xxx',
                trackCommMode: 'xxx',
                trackAddress: 'xxx',
                trackCommSituation: 'xxx',
                trackCommEffect: 'xxx',
            }],

//          机会审批日志
            approvalTable: [{
                approvalId: 1,
                approvalName: 'xxx',
                approvalMember: 'xxx',
                approvalStatus: 'xxx',
                approvalAdvice: 'xxx',
                approvalTime: 'xxx',

                approvalHandleAdvice: 'agree',
                approvalUploader: 'xxx',
                approvalUptime: 'xxx',
            }],

            newApproval: {
                approvalId: null,
                approvalName: 'xxx',
                approvalMember: 'xxx',
                approvalStatus: 'xxx',
                approvalAdvice: 'xxx',
                approvalTime: 'xxx',

                approvalHandleAdvice: 'agree',
                approvalUploader: 'xxx',
                approvalUptime: 'xxx',
            },


            inlineRules: {
                approvalName: [
                    {required: true, message: 'Please enter approval name', trigger: 'blur'}
                ],
                approvalHandleAdvice: [
                    {required: true, message: 'Please enter handle advice', trigger: 'change'}
                ],
                approvalAdvice: [
                    {required: true, message: 'Please enter approval advice', trigger: 'blur'}
                ],
            },


        }
    },
    mounted() {
        if (this.$store.getters.getUser.roles[0] === this.$npms.roles.MARKET_MGR) {
            this.handleAdviceOptions = options.approveOptions3
        } else {
            this.handleAdviceOptions = options.approveOptions2
        }
    },
    methods: {

        //全屏
        onFullScreenClick() {
            this.fullscreen = !this.fullscreen
        },

        //弹窗关闭
        handleClose(done) {
            this.$confirm('Closing now will lose all unsaved data. Confirm closing?', {
                confirmButtonText: "confirm",
                cancelButtonText: "cancel"
            })
                // eslint-disable-next-line no-unused-vars
                .then(e => {
                    done();
                })
        },
        ConfirmClose() {
            this.close()
        },

        handleConfirm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) return

                this.newApproval.approvalMember = this.$store.getters.getUser.username
                this.newApproval.approvalUploader = this.$store.getters.getUser.username

                let dto = {
                    chanceId: this.addChanceForm.chanceId,
                    role: this.$store.getters.getUser.roles[0],
                    approval: this.newApproval
                }
                const tthis = this
                this.$axios.post("/approve/approve/addChanceApproval", dto).then(e => {
                    console.log("add chance response")
                    console.log(e.data.msg === 'Approved')
                    if (e.data.msg === 'Approved') {

                        let chanceCode = ""
                        tthis.addChanceForm.chanceStatus = 'Finished'
                        tthis.$axios.post("/chance/chance/updateChance",tthis.addChanceForm)
                        tthis.$axios.post("/approve/approve/generateChanceCode/" + this.addChanceForm.chanceId).then(e => {
                            console.log("asdasdsadasdasssa")
                            console.log(e.data)
                            chanceCode = e.data.obj
                            for (let key in tthis.subchanceTable) {
                                let dto = {
                                    subchanceId: tthis.subchanceTable[key].subchanceId,
                                    chanceCode: chanceCode
                                }
                                tthis.$axios.post("/approve/approve/generateSubchanceCode", dto)
                            }
                        })

                        this.callback()

                        this.ConfirmClose()
                    }
                })

                console.log("dto")
                console.log(dto)


                console.log('before close', this.approvalTable);
                //深拷贝
                const dd = JSON.parse(JSON.stringify(this.approvalTable))
                this.callback(dd);

                this.$message({
                    message: "approve successfully!",
                    type: "success",
                });

                this.$refs.elForm.resetFields()
                this.ConfirmClose();

            })
        },

        setData(data, index) {
            this.addChanceForm = data
            // this.addChanceForm.chanceId = data.chanceId

            this.$axios.post(
                '/chance/chance/searchSubchance/' + data.chanceId
            ).then(res => {
                // console.log("abc"+res.data.obj)
                this.subchanceTable = res.data.obj
            });

            this.$axios.post(
                '/chance/chance/searchCompetition/' + data.chanceId
            ).then(res => {
                // console.log("abc"+res.data.obj)
                this.competitionTable = res.data.obj
            });

            this.$axios.post(
                '/chance/chance/searchPurchase/' + data.chanceId
            ).then(res => {
                // console.log("abc"+res.data.obj)
                this.purchaseTable = res.data.obj
            });


            this.$axios.post(
                '/chance/chance/searchTrack/' + data.chanceId,
            ).then(res => {
                console.log(res.data)

                this.trackTable = res.data.obj

            });

            this.$axios.post(
                '/approve/approve/getApprovalByChanceId/' + data.chanceId
            ).then(res => {
                // console.log("abc"+res.data.obj)
                this.approvalTable = res.data.obj
            });

        },


    }
}
</script>

<style scoped>


.fullscreen {
    position: absolute;
    right: 50px;
    top: 18px;
    cursor: pointer;
    transition: all 200ms;
}

.fullscreen:hover {
    color: #6DBEF8;
}

.box-card {
    margin-top: 10px;
}


</style>